<template>
  <div >
    <JInput size="small" v-model="editorVal" @click="focus" readonly />
    <tiny-dialog-box v-model:visible="dialogVisible" fullscreen :show-close="false"
    :show-header="false">
      <div style="height: 5px;"></div>
<!--      <div>-->
<!--&lt;!&ndash;        <span>模板</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <JButton  style="margin-left: 10px;" size="small" v-for="(temp, index) in temps" :key="index" @click="moban(temp)">{{ temp.name }}</JButton >&ndash;&gt;-->
<!--       -->
<!--      </div>-->
      <aceeditor v-model="editorVal" />
      <div style="margin-top: 10px;margin-left: 100px;">
        <JButton  style="margin-left: 100px;" type="info" size="medium" @click="save(0)">保存</JButton >
        <JButton style="margin-left: 60px;" type="success" size="medium" @click="save(1)">保存并关闭</JButton >
        <JButton style="margin-left: 60px;" type="danger" size="medium" @click="dialogVisible=false">关闭</JButton >
      </div>
    </tiny-dialog-box>
  </div>
</template>

<script setup name="CodeEditor">
import tool from "@/utils/tool";
import {ref, nextTick} from "vue";
import Aceeditor from "@/views/design/aceeditor.vue";
import {TinyDialogBox} from "@opentiny/vue";
const props = defineProps({
  des: {
    type: String,
    default: ""
  },
  page: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "javascript"
  },
  height: {
    type: [String,Number],
    default: 0,
  },
  options: {
    type: Object,
    default: () => {}
  },
  theme: {
    type: String,
    default: "idea"
  },
  readOnly: {
    type: Boolean,
    default: false
  },
})
const emit = defineEmits(['save'])
const aceref = ref()
const dialogVisible = ref(false)
const editorVal = defineModel()

const temps = ref([])
const focus = () => {
  dialogVisible.value = true
  // nextTick(() => {
  //   opened()
  // })
}
// const opened = () => {
//   tool.post('design/getBtnTemp').then(ret => {
//     if(ret.stat) {
//       temps.value = tool.str2obj(ret.data)
//     }
//   })
// }
const save = (close = 0) => {
  setTimeout(() => {
    emit('save' )
    if(close === 1) {
      dialogVisible.value = false
    }
  }, 50)
}
const moban = (temp) => {
  if(temp.name === '搜索表单') {
    tool.post('design/getSearchRule', {page: props.page}).then(ret => {
      if(ret.stat) {
        editorVal.value = ret.data
      }
    })
  }
  if(temp.name === '表格') {
    tool.post('design/getGridRule', {page: props.page}).then(ret => {
      if(ret.stat) {
        editorVal.value = ret.data
      }
    })
  }
  else {
    if( temp.tpl) {
      let str = editorVal.value + '\n' + temp.tpl
      editorVal.value = str
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.tiny-dialog-box .tiny-dialog-box__body) {
  max-height: 100vh;
}
</style>